{% extends "mobile/base.html" %}

{% load static %}
{% load jsonify %}


{% block head-content %}

{% block head-content2 %}
<title></title>
{% endblock %}

<script src="{{ js_config.js_lib.jquery }}"></script>
<script src="{{ js_config.js_lib.md5 }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.font_awesome }}">
<script src="{{ js_config.js_lib.vuejs }}"></script>
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->

<script src="{{ js_config.js_lib.nice_validator }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.nice_validator_css }}">

<script src="{{ js_config.js_lib.velocity }}"></script>

<!--<script src="{{ js_config.js_lib.cube_ui }}"></script>-->
<!--<link rel="stylesheet" href="{{ js_config.js_lib.cube_ui_css }}">-->
<script src="{{ js_config.js_lib.mint_ui }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.mint_ui_css }}">
<script src="{{ js_config.js_lib.vant }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.vant_css }}">
<script src="{{ js_config.js_lib.exfun }}"></script>

<script src="{{ js_config.js_lib.mobile }}"></script>
<script src="{{ js_config.js_lib.wechat }}"></script>
<script src="{{ js_config.js_lib.wxfront }}"></script>

<!--<script src="{{ js_config.js_lib.mylbs }}"></script>-->

<!--<script src="{{ js_config.js_lib.enterprise }}"></script>-->

{% endblock %}


{% block page_body %}

<script>
    if(js_config.is_debug){
        Vue.config.devtools = true
    }else{
        Vue.config.devtools = false
    }
    //    page_editor ={{ page_editor | jsonify }}
//    ctx = {{ ctx | jsonify }}

    editor= {{ editor | jsonify }}
    editor_ctx = {{ editor_ctx | jsonify }}

    $(function(){

        live_root = new Vue({
            el:'#main-panel',
            data: function(){
                var search_args = ex.parseSearch()
                return {
//                    stack:[{editor:page_editor,ctx:ctx}],
                    stack: [],
                    stack2:[],
                    tranName:'slide-left',
                    is_clearing:false,
                    loading:false, // 用于点击抖动
                    open_status:'default',
                    crt_index:0,
                }
            },
            components:{},
            created(){
//                this.open_live(window[editor],editor_ctx,{firstscreen:true})
                this.first_screen(window[editor],editor_ctx)
//                this.open_live(window[editor],editor_ctx)
            },
            computed:{
                current_com(){
                    return this. stack[this.stack.length -1 ]
                },
                alive_list(){
                    return this.stack.map((item)=>{
                                return item.editor
                            })
                },
                total_stack(){
                    return this.stack.concat(this.stack2)
                }
            },
            methods:{
                clear_stack(){
                    this.is_clearing = true
                    var length =this.stack.length
                    for(var i=0;i<length-1;i++){
                        history.back()
//                        this.back()
                    }
                    this.stack = []
                    history.replaceState({},'')
                    this.is_clearing=false
                },
                first_screen(editor,editor_ctx){
                    this.clear_stack()
                    this.tranName ='fade'
                    this.open_live(editor,editor_ctx,{back_animate:'fade',firstscreen:true})
                    setTimeout(()=>{
                        this.tranName = 'slide-left'
                     },500)
                },
                open_fade(com,editor_ctx){
                    // 渐变的打开页面
                    this.tranName ='fade'
                    this.open_live(com,editor_ctx,{back_animate:'fade'})
                    setTimeout(()=>{
                        this.tranName = 'slide-left'
                     },500)
                },
                open_live(com,ctx,option){
                    // 滑动的打开页面
                    if(this.loading){
                        return
                    }else{
                        this.loading = true
                        setTimeout(()=>{
                            this.loading = false
                        },1000)
                    }
                    if(!option ||  !option.firstscreen){
                        history.pushState({},'')
                    }
                    if(typeof com =='string'){
                        com = window[com]
                    }
                    if (com.basename){
                        var com_name = 'dyn-'+com.basename +'-'+ Date.now()
                    }else{
                        var com_name = 'dyn-'+ Date.now()
                    }
                    var big_com = {
                        mixins:[com],
                        name:com_name,
                    }
                    Vue.set( this.$options.components,com_name,big_com)
                    this.stack.push({editor:com_name,ctx:ctx ,option:option })
                    this.crt_index= this.stack.length - 1
                    var  self =this
                    var fun_id = 'root_live_back_fun' ;// Date.now()
                    named_hub[fun_id] = function(){
                        self.back()
                    }
//                    history.replaceState({callback:fun_id},'','?_live='+com.basename)
                    var url = ex.appendSearch({_live:com.basename})
                    history.replaceState({callback:fun_id},'',url)
                    Vue.nextTick(()=>{
                        if(this.$refs[com_name][0].activated){
                            this.$refs[com_name][0].activated()
                        }
                        if(this.stack.length >1 ){
                            var last_com_name = this.stack[this.stack.length -2].editor
                            if(this.$refs[last_com_name][0].deactivated){
                                this.$refs[last_com_name][0].deactivated()
                            }
                        }
                    })
                },
                back(){
                    // IOS history.back 时 ，会调用到 这个back(不知道原因)，防止页面结构被破坏.
                    if(this.last_back_time){
                        var now = Date.now()
                        var span = now - this.last_back_time
                        if(span < 500){
                            console.log('等待')
                            setTimeout(this.back,span+100)
                            return
                        }else{

                            this.last_back_time = now
                        }
                    }else{
                        this.last_back_time =Date.now()
                    }


                    if(this.stack.length <=1){
                        return
                    }
//                    if(this.loading){
//                        return
//                    }else{
//                        this.loading = true
//                    }

                    if(this.is_clearing){
                        var com = this.stack.pop()
                        Vue.delete(this.$options.components,com)
                        return
                    }
                    var stack_ctx = this. stack[this.stack.length -1 ]
                    var option= stack_ctx.option
                    if(option && option.back_animate){
                        this.tranName = option.back_animate
                    }else{
                        this.tranName = 'slide-right'
                    }
                    this.crt_index -= 1

                    Vue.nextTick(()=>{
                        var com_name=this.stack[this.stack.length-1].editor
                        if(this.$refs[com_name][0].deactivated){
                            this.$refs[com_name][0].deactivated()
                        }
                    if(this.stack.length >1 ){
                        var last_com_name = this.stack[this.stack.length -2].editor
                        if(this.$refs[last_com_name][0].activated){
                            this.$refs[last_com_name][0].activated()
                        }
                    }
                })
                    Vue.nextTick(()=>{
                        this.tranName = 'slide-left'
                    })
                    var com = this.stack.pop()
                    this.stack2.push(com)
//                    setTimeout(()=>{
//                        this.stack2 = []
//                        Vue.delete(this.$options.components,com)
//    //                        this.loading = false
//                    },20000)
                },
                lastsibe(vc){
                    var com_name = vc.$options.name
                    var editor_list = ex.map(this.stack,(item)=>{return item.editor })
                    var index = editor_list.indexOf(com_name)
                    var sibe_name = editor_list[index - 1]
                    return this.$refs[sibe_name][0]
//                    var index = this.$children.indexOf(vc)
//                    if(index >0){
//                        return this.$children[index-1]
//                    }
                },
                liveVc(vc){
                        //获取vc的 live_vc 容器
                    var live_vc = vc
                    while (live_vc.$parent){
                        var com_name = live_vc.$parent.$options.name
                        if(ex.findone(this.stack,{editor:com_name})){
                            return live_vc
                        }else{
                            live_vc = live_vc.$parent
                        }
                    }

                },
                open_page(url){
//                    var t = new Date().getTime()
//                    var  json={time:t};
//                    var old_url = ex.appendSearch({t:t})
//                    window.history.replaceState(json,"",old_url);
                    window.location.href= url;
                },
                onAfterLeave(el){
//                    var self =this
//                    setTimeout(()=>{
//                        var com = self.stack2.pop()
//                        if(com){
//                            Vue.delete(self.$options.components,com)
//                        }
//                    },500)

                    ex.each(this.stack2,(com)=>{
                        Vue.delete(this.$options.components,com)
                    })
                    this.stack2=[]
                }

            }
        })
    })


</script>
<style>
    body{
        background-color: #525252;
    }
    #main-panel{
        margin: auto;
        overflow: hidden;
        position: relative;
        /*height: var(--app-height);*/
        /*width: 100vw;*/
        background-color: white;
    }
    .child-view {
        width: 100%;
        height: 100%;
        transition: transform .6s cubic-bezier(.55,0,.1,1);
    /*,opacity  .5s  ease-in-out*/
        /*transition: transform 30000s cubic-bezier(.55,0,.1,1);*/
    }

    .slide-left-enter{
        position: absolute;
        top:0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
        z-index: 100;
    }
    /*.slide-left-enter-active{*/
        /*position: absolute;*/
        /*top:0;*/
        /*-webkit-transform: translate(50%, 0);*/
        /*transform: translate(50%, 0);*/
    /*}*/

    /*.slide-right-enter-active{*/
        /*position: absolute;*/
        /*top:0;*/
        /*-webkit-transform: translate(0, 0);*/
        /*transform: translate(0, 0);*/
        /*z-index: -1;*/
    /*}*/

    .slide-left-leave-to{
        display: none;
    }

    .slide-left-leave-active {
        position: absolute;
        width: 100%;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0.8;
        display: block;
        /*transition:  opacity  .5s  ease-in-out;*/
    }

    /*.slide-right-enter-to{*/
        /*z-index:-1*/
    /*}*/
    /*.slide-left-leave-to !* .fade-leave-active below version 2.1.8 *! {*/
        /*!*z-index:-1*!*/
    /*}*/

    .slide-right-enter{
        position: absolute;
        width: 100%;
        -webkit-transform: translate(50%, 0);
        transform: translate(50%, 0);
    }


    /*.slide-left-leave {*/
        /*top:0;*/
        /*position: absolute;*/
        /*width: 100%;*/
        /*-webkit-transform: translate(-50%, 0);*/
        /*transform: translate(-50%, 0);*/
    /*}*/

    /*.slide-left-leave-active {*/
        /*z-index: -1;*/
        /*transition: transform 20.5s cubic-bezier(.55,0,.1,1);*/

    /*}*/

    /*.slide-right-enter-active{*/
        /*position: absolute;*/
        /*width: 100%;*/
        /*-webkit-transform: translate(-50%, 0);*/
        /*transform: translate(-50%, 0);*/
        /*z-index:-1;*/
        /*transition: transform 20.5s cubic-bezier(.55,0,.1,1);*/
    /*}*/

    /*.slide-left-leave-active {*/
        /*position: absolute;*/
        /*width: 100%;*/
        /*-webkit-transform: translate(-50%, 0);*/
        /*transform: translate(-50%, 0);*/
        /*transition: transform 20.5s cubic-bezier(.55,0,.1,1);*/
    /*}*/


    .slide-right-leave-active {
        position: absolute;
        width: 100%;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
        z-index:100;
        top:0;
    }


    /*.slide-right-enter{*/
        /*position: absolute;*/
        /*width: 100%;*/
        /*-webkit-transform: translate(-50%, 0);*/
        /*transform: translate(-50%, 0);*/
        /*z-index:-1;*/
    /*}*/



    /*.slide-right-enter-active{*/
        /*position: absolute;*/
        /*width: 100%;*/
        /*-webkit-transform: translate(-50%, 0);*/
        /*transform: translate(-50%, 0);*/
        /*z-index:-1;*/
        /*transition: transform 20.5s cubic-bezier(.55,0,.1,1);*/
    /*}*/



    /*.slide-left-enter, .slide-right-leave-active {*/
        /*position: absolute;*/
        /*width: 100vw;*/
        /*-webkit-transform: translate(100vw, 0);*/
        /*transform: translate(100vw, 0);*/
    /*}*/
    /*.slide-right-enter,.slide-left-leave-active {*/
        /*position: absolute;*/
        /*width: 100vw;*/
        /*-webkit-transform: translate(-100vw, 0);*/
        /*transform: translate(-100vw, 0);*/
    /*}*/

    .fade-leave-active{
        transition:none;
    }
    .fade-enter-active {
        transition: none;
    }
   /*opacity .3s;*/
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>
<div id="main-panel">

    <transition-group :name="tranName" @after-leave="onAfterLeave" >
        <component :ref="ctx.editor" v-for="(ctx,index) in total_stack" :key="ctx.editor"
                   class="child-view"
                   v-show="index==crt_index"
                   :is="ctx.editor" :ctx="ctx.ctx" ></component>
    </transition-group>
        <!--<template v-for="(ctx,index) in stack">-->
            <!--<transition :name="tranName">-->
                <!--<component class="child-view" v-show="index==stack.length-1" :is="ctx.editor" :ctx="ctx.ctx" ></component>-->
            <!--</transition>-->
        <!--</template>-->


    <!--<com-live-stack  :ctx_list="stack">-->

    <!--</com-live-stack>-->
    <!--<transition :name="tranName" @after-enter="onEnter">-->
        <!--<keep-alive :include="alive_list">-->
            <!--<component ref="crt_com" class="child-view" :is="current_com.editor" :ctx="current_com.ctx" ></component>-->
        <!--</keep-alive>-->
    <!--</transition>-->



</div>


<script>
    var adapt_size = {{ adapt_size | jsonify }}
    function fullsize(){
//        $('#main-panel').height( window.innerHeight +'px')
//        $('#main-panel').width( window.innerWidth +'px')
        $('#main-panel').width( '100vw')
        $('#main-panel').height( '100vh')
        cfg.updateSizeConfig()
    }
    function fullheight(){
        var hh = window.innerHeight*0.563
        $('#main-panel').width( hh +'px')
        $('#main-panel').height( window.innerHeight +'px')
        $('html').css('font-size',hh * 0.1333)
//        $(window).trigger('resize')
        cfg.updateSizeConfig()
    }
    function fullwidth(){
        var hh = window.innerWidth / 0.563
        $('#main-panel').height( hh +'px')
        $('#main-panel').width( window.innerWidth +'px')
//        $(window).trigger('resize')
        cfg.updateSizeConfig()
    }
        if(ex.os.isPc && !ex.os.isTablet){
            fullheight()
        }else if(ex.os.isTablet){
            fullsize()

        }else{
            fullsize()
        }




</script>
{% block page_content %}

{% endblock %}

{% endblock %}